<template>
	<view class="card p-30 d-flex">
		<view class="card_head d-flex">
			<text class="card_title">HR背景调查报告</text>
			
			<view class="card_btn mb-30 d-flex">
				<text>报告示例</text>
				<Icon name="arrow-right" class="relative card_btn_icon" color="#404040" size="26rpx" />
			</view>
		</view>
		
		<view class="list d-flex">
			<view v-for="(item, index) of list" :key="index" :class="['list_item d-flex', index !== list.length - 1 ? 'mr-10' : '']">
				<image src="/static/image/housekeeping/active.svg" mode="widthFix" class="list_item_icon mr-10" />
				<text class="list_item_title">{{ item }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import Icon from '@/components/Icon/index.vue'
	
	const list = reactive(['基本信息核实', '职业资格与技能核实', '社会信用检测'])
</script>

<style lang="scss" scoped>
		.card {
			&_head {
				justify-content: space-between;
			}
			&_title {
				color: #664690;
			}
			&_btn {
				align-items: center;
				text {
					color: #404040;
					font: {
						size: 24rpx
					}
				}
				
				&_icon {
					top: 3rpx;
				}
			}
			
			.list {
				flex-direction: row;
				justify-content: space-between;
				&_item {
					&_icon {
						width: 30rpx;
					}
					&_title {
						font: {
							size: 23rpx;
						}
					}
				}
			}
		}
</style>
